<template>
	<view class="page-container">
		<uni-card :is-shadow="false" is-full :title="workInfo.workName" v-if="userInfo.roleId === 2">
			<view class="card-item">
				<text class="card-label">学生姓名</text>
				<text class="card-value">{{ workInfo.stuName }}</text>
			</view>
			<view class="card-item">
				<text class="card-label">导师姓名</text>
				<text class="card-value">{{ workInfo.tchName }}</text>
			</view>
			<view class="card-item">
				<text class="card-label">毕设描述</text>
				<text class="card-value">{{ workInfo.workDesc }}</text>
			</view>
			<view class="card-item">
				<text class="card-label">开题报告</text>
				<image class="card-value" :src="'http://localhost:8081' + workInfo.workReport"
					style="width: 200rpx;height: 200rpx;" @click="handlePreview(workInfo.workReport)" />
			</view>
			<view class="card-item" style="align-items: center;margin-top: 10rpx;">
				<text class="card-label">完成进度</text>
				<u-line-progress :percentage="workInfo.process"></u-line-progress>
			</view>
			<view class="card-item">
				<text class="card-label">创建时间</text>
				<text class="card-value">{{ workInfo.createTime.replace('T', ' ') }}</text>
			</view>
			<view class="card-item" style="margin-top: 10rpx;">
				<u-button type="primary" shape="circle" @click="toProcess(workInfo.workId)">进行毕设</u-button>
			</view>
		</uni-card>
		<u-collapse v-else style="background-color: #ffffff;">
			<u-collapse-item :title="item.workName" :value="item.stuName" v-for="(item,index) in workList" :key="index">
				<view @click="toProcess(item.workId)">
					<view style="display: flex;align-items: center;">
						<text>开题报告</text>
						<image :src="'http://localhost:8081' + item.workReport" style="width: 180rpx;height: 120rpx;margin-left: 20rpx;"
							@click="handlePreview(item.workReport)" />
					</view>
					<text class="u-collapse-content">毕设描述：{{ item.workDesc }}</text>
					<view style="display: flex;align-items: center;margin-top: 20rpx;">
						<text>完成进度</text>
						<u-line-progress :percentage="item.process" showText style="margin-left: 20rpx;"></u-line-progress>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		workDetailService,
		workListService
	} from '../../api/work';
	export default {
		data() {
			return {
				workInfo: {},
				userInfo: uni.getStorageSync('user-profile'),
				workList: []
			};
		},
		onLoad() {
			if (this.userInfo.roleId === 2) {
				this.getWorkDetail()
			} else {
				this.getWorkList()
			}
		},
		methods: {
			async getWorkDetail() {
				this.workInfo = await workDetailService()
			},
			handlePreview(url) {
				const imageUrl = 'http://localhost:8081' + url
				uni.previewImage({
					urls: [imageUrl]
				})
			},
			toProcess(workId) {
				uni.navigateTo({
					url: `/pages/workProcess/workProcess?id=${workId}`
				})
			},
			async getWorkList() {
				this.workList = await workListService()
			},
			handlePreview(url) {
				const imageUrl = 'http://localhost:8081' + url
				uni.previewImage({
					urls: [imageUrl]
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;

		.page-container {
			padding: 20rpx;

			.card-item {
				line-height: 50rpx;
				display: flex;

				.card-label {
					width: 200rpx;
				}

				.card-value {
					flex: 1;
				}
			}
		}
	}
</style>